<template>
  <div class="main-content">
    <el-tabs v-model="editableTabsValue"
             type="card"
             border
             style="width:100%;">
      <el-tab-pane label="数据源列表"
                   name="list">
        <div style="display: flex;justify-content: space-between;">
          <div>
            <el-button-group>
              <el-button icon="el-icon-circle-plus" @click="handleShowDataSourceVis()"
                         type="primary">
                新增数据源
              </el-button>
              <el-button icon="el-icon-remove"
                         @click="delDatasource">删除
              </el-button>
              <el-button icon="el-icon-refresh"
                         @click="loadData()">刷新
              </el-button>
            </el-button-group>
          </div>
          <div>
            <el-input placeholder="请输入关键字"
                      v-model="searchKeys"
                      class="input-with-select"
                      @keyup.enter.native="loadData()">
              <el-button slot="append"
                         icon="el-icon-search"
                         @click="loadData()"></el-button>
            </el-input>
          </div>
        </div>
        <el-table ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           width="55">
          </el-table-column>
          <el-table-column v-for="(item,index) in tablesHeader"
                           :key="index"
                           :prop="item.prop"
                           :label="item.label"
                           :width="item.width"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="状态"
                           align="center">
            <template slot-scope="scope">
              <el-button :type="getStatusType(scope.row.isConnected)"
                         plain
                         size="small">{{getStatusValue(scope.row.isConnected)}}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           align="center"
                           width="220">
            <template slot-scope="scope">
              <el-button v-if="scope.row.isConnected==0" plain
                         class="el-button el-button--primary" size="small"
                         @click="connect(scope.row.id)">测试链接
              </el-button>
              <el-button v-if="scope.row.isConnected==0" plain
                         class="el-button el-button--primary" size="small"
                         @click="modifyDataSource(scope.row)">修改
              </el-button>
              <el-button v-if="scope.row.isConnected==1" plain class="el-button el-button--info"
                         size="small" @click="disconnect(scope.row.id)">取消链接
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px;display: flex;justify-content: flex-end">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="page"
                         :page-size="limit"
                         layout="total,prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 新增数据源表单对话框-->
    <el-dialog title="新增数据源" :visible.sync="dataSourceVis"
               width="50%"
               append-to-body
               :before-close="handleCloseDataSourceVis">
      <el-form :model="dataSourceForm"
               :rules="rules"
               ref="dataSourceForm"
               label-width="140px"
               style="padding:10px;margin:20px 0"
               class="demo-dataSourceForm">
        <el-form-item style="display:none"
                      label="隐藏字段"
                      prop="id">
          <el-input v-model="dataSourceForm.id"
                    placeholder="隐藏字段"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item label="数据源名称"
                      prop="name">
          <el-input v-model="dataSourceForm.name"
                    placeholder="数据源名称"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item
          label="数据源ID"
          prop="sourceId">
          <el-input v-model="dataSourceForm.sourceId"
                    placeholder="数据源ID"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item
          label="数据库类型"
          prop="type">
          <el-select v-model="dataSourceForm.type"
                     placeholder="请选择">
            <el-option label="ORACLE"
                       value="oracle"></el-option>
            <el-option label="MYSQL"
                       value="mysql"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="数据库驱动"
          prop="className">
          <el-input v-model="dataSourceForm.className"
                    placeholder="数据库驱动"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item
          label="数据库账号"
          prop="username">
          <el-input v-model="dataSourceForm.username"
                    placeholder="数据库账号"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item
          label="数据库密码"
          prop="password">
          <el-input v-model="dataSourceForm.password"
                    placeholder="数据库密码"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item
          label="JDBC链接地址"
          prop="jdbcUrl">
          <el-select v-model="dataSourceForm.jdbcUrl"
                     placeholder="请选择">
            <el-option label="jdbc:thin:localhost:1521/orcl"
                       value="jdbc:thin:localhost:1521/orcl"></el-option>
            <el-option label="jdbc:mysql:localhost:3306"
                       value="jdbc:mysql:localhost:3306"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="footer"
           style="text-align: center">
        <el-button @click="handleCloseDataSourceVis">取消</el-button>
        <el-button type="primary"
                   @click="addORUpdateDataSource">确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  export default {
    name: 'datasourceList',
    components: {},
    data() {
      return {
        page: 1,
        limit: 10,
        total: 0,
        searchKeys: '', // 搜索内容
        editableTabsValue: 'list',
        dataSourceVis: false,
        dataSourceInsertORUpdateURL: '/datasource/insert',
        editableTabs: [],
        tabIndex: 1,
        tableData: [],
        multipleSelection: [],
        tablesHeader:
          [
            {
              prop: 'sourceId',
              label: '源ID',
              width: '220'
            },
            {
              prop: 'name',
              label: '名称',
              width: '220'
            },
            {
              prop: 'type',
              label: '类型',
              width: ''
            },
            {
              prop: 'jdbcUrl',
              label: '链接地址',
              width: '180'
            },
            {
              prop: 'creater',
              label: '创建人',
              width: ''
            },
            {
              prop: 'updateTime',
              label: '更新时间',
              width: ''
            }
          ],
        dataSourceForm:
          {
            id: '',
            name: '',
            sourceId: '',
            type: '',
            className: '',
            username: '',
            password: '',
            jdbcUrl: ''
          },
        rules: {
          sourceId: {required: true, message: '数据源ID不能为空', trigger: 'blur'},
          type: {required: true, message: '数据源类型不能为空', trigger: 'blur'},
          className: {required: true, message: '驱动名称不能为空', trigger: 'blur'},
          username: {required: true, message: '用户名不能为空', trigger: 'blur'},
          password: {required: true, message: '密码不能为空', trigger: 'blur'},
          jdbcUrl: {required: true, message: '链接地址不能为空', trigger: 'blur'}
        }
      }
    },
    methods: {
      // 默认加载数据
      async loadData() {
        let params = {
          current: this.page,
          size: this.limit,
          searchKeys: this.searchKeys
        }
        let url = '/datasource/page'
        let _res = await this.utils.loadData(this, url, params);
        this.utils.showCallBackMessage(this, _res, 0, true, false, true)
        if (_res && _res.errcode === 0) {
          this.tableData = _res.data.records
          this.page = _res.data.current
          this.limit = _res.data.size
          this.total = _res.data.total
        } else {
          this.tableData = []
          this.page = 1
          this.limit = 10
          this.total = 0
        }
      },
      // 分页属性
      handleSizeChange(val) {
        this.limit = val
        this.loadData()
      },
      handleCurrentChange(val) {
        this.current = val
        this.loadData()
      },
      // 增删改 数据源
      async addORUpdateDataSource() {
        let _params = this.dataSourceForm;
        this.$refs.dataSourceForm.validate(async (valid) => {
          if (!valid) {
            return;
          }
          let _res = await this.utils.post(this, this.dataSourceInsertORUpdateURL, _params,
            true)
          this.utils.showCallBackMessage(this, _res, 0, true, true, true)
          if (_res.errcode == 0 || _res.errcode == 200) {
            this.handleCloseDataSourceVis()
            this.loadData()
          }
        })
      },
      // 修改操作事件
      modifyDataSource(row) {
        this.dataSourceForm = row;
        this.dataSourceInsertORUpdateURL = '/datasource/update'
        this.handleShowDataSourceVis()
      },
      // 测试链接事件
      async connect(_id) {
        let _params = {
          connectId: _id
        }
        let _url = '/datasource/connect'
        let _res = await this.utils.get(this, _url, _params, true)
        this.utils.showCallBackMessage(this, _res, 0, _res.data == true, true, true)
        this.loadData()
      },
      // 取消测试链接事件
      async disconnect(_id) {
        let _params = {
          connectId: _id
        }
        let _url = '/datasource/disconnect'
        let _res = await this.utils.get(this, _url, _params, true)
        this.utils.showCallBackMessage(this, _res, 0, _res.data == true, true, true)
        this.loadData()
      },
      // 表单关闭
      handleCloseDataSourceVis() {
        this.dataSourceVis = false
        this.$refs.dataSourceForm.resetFields()
        this.dataSourceForm =
          {
            id: '',
            name: '',
            sourceId: '',
            type: '',
            className: '',
            username: '',
            password: '',
            jdbcUrl: ''
          }
      },
      // 表单显示
      handleShowDataSourceVis() {
        this.dataSourceVis = true
      },
      // 表单选择
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 删除数据源选择
      delDatasource() {
        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log("确定删除 ")
          this.del()
        }).catch(() => {
          this.utils.showMessage(this, 'info', '已取消删除')
        })
      },
      // 删除
      async del() {
        let data = []
        let selectRows = this.multipleSelection
        if (selectRows.length === 0) {
          this.utils.showMessage(this, 'error', '请选择一行数据')
          return false
        }
        selectRows.forEach(row => {
          data.push(row.id)
        })
        data.join()
        let _url = '/datasource/delete'
        let _params = data
        let _res = await this.utils.post(this, _url, _params, true)
        this.utils.showCallBackMessage(this, _res, 0, _res.data == true, true, true)
        this.loadData()
      }
      ,
      getStatusType(_value) {
        if (_value === 1) {
          return 'success'
        } else if (_value === 0) {
          return 'error'
        } else {
          return 'info'
        }
      }
      ,
      getStatusValue(_value) {
        if (_value === 1) {
          return '链接中'
        } else if (_value === 0) {
          return '未链接'
        } else {
          return '调试'
        }
      }
    }
    ,
    created() {
      this.loadData()
    }
  }
</script>
